<template>
	<new-table v-bind="state" @handleSizeChange="onHandleSizeChange" @handleCurrentChange="onHandleCurrentChange"
		@handleEdit="onHandleEdit" @handleDelete="onHandleDelete">
		<template #search>
			<new-form :formOptions="formOptions" :searchForm="searchForm" @search="onSearch" />
		</template>

		<!-- <template #operation="scope">
			<el-button type="primary" link @click="openDetail(scope.row, HandleType.EIDT)">
				<q-icon :name="`img:${icon_edit}`" />
			</el-button>
			<el-button type="primary" link @click="deleteRow(scope.row)">
				<q-icon :name="`img:${icon_delete}`" />
			</el-button>
		</template> -->

		<template #btn>
			<el-button type="primary" @click="openDetail(null, HandleType.ADD)">
				+ 新增部门
			</el-button>
		</template>
	</new-table>
	<HandleModal ref="handleModalRef" v-bind="HandleModalProps"/>
</template>

<script setup lang="ts" name="FormTableDemoExample">
import { onMounted, reactive, toRefs, ref, h } from "vue";
import NewTable from 'src/components/NewTable/index.vue'
import NewForm from 'src/components/NewForm/index.vue'
import HandleModal from '../components/HandleModal.vue'
import icon_edit from 'src/assets/image/icon_edit.svg'
import { HandleType } from "src/pages/clueManager/const";
import icon_delete from 'src/assets/image/icon_delete.svg'
import { DepartmentStateList } from "src/pages/clueManager/const";
import { ElTag } from "element-plus";
import { getDepartmentSearch, postDepartmentAdd, postDepartmentModify, getDepartmentDel } from "../api";
import { useUserData } from "src/hooks";
import utils from "src/utils";
const handleModalRef = ref<InstanceType<typeof HandleModal> | null>(null);

const renderCB = (groups: any[], value: any, key_val = 'value', key_key = 'label'): any => {
	const newVal = (groups.filter(group => `${group[key_val]}` === `${value}`)[0] || {})[key_key]
	const newType = `${value}` === '0' ? 'primary' : 'danger'
	return h(ElTag, {
		// @ts-ignore
		class: `el-tag--${newType}`
	}, newVal)
}
const state = reactive({
	tableHeader: <TableHeader[]>[
		{ label: "部门名称", prop: "name" },
		{ label: "有效员工数", prop: "employeeNum" },
		{ label: "状态", prop: "status", render: (value: any) => renderCB(DepartmentStateList, value) },
		{ label: "创建时间", prop: "addtime", width: 200 },
		{
			label: "操作",
			fixed: "right",
			slotKey: "default",
			width: 120,
		},
	],
	//表项数据
	tableData:<any[]> [],
	formOptions: <FormOptions[]>[
		{
			type: "input",
			props: {
				label: "部门名称",
				placeholder: "请输入部门名称",
				clearable: true,
			},
			vm: "department"
		},
		{
			type: "select",
			props: {
				label: "状态",
				placeholder: "请选择状态",
				clearable: true,
			},
			vm: "state",
			selectOptions: [...DepartmentStateList]
		}
	],
	//这里允许动态属性所以可为空
	searchForm: <SearchFormType>{},
	isShowSearchRegion: true,
	isShowBtnRegion: true,
	pageNum: 1,
	pageSize: 10,
	total: 0,
	tableHeight: "calc(100vh - 302px)",
	isIndex: false,
});
const { formOptions, searchForm, pageNum, pageSize } = toRefs(state);
const [ useData ] = useUserData();
const handleFormOptions: FormOptions[] = [
	{
		type: "select",
		props: {
			label: "上级部门",
			placeholder: "请选择上级部门",
			clearable: true,
			disabled: true
		},
		vm: "agencyid",
		selectOptions: [{
			value: useData.agencyid,
			label: useData.agencyName
		}],
		span: 24,
		required: true,
	},
	{
		type: "input",
		props: {
			label: "部门名称",
			placeholder: "请输入部门名称",
			clearable: true,
			maxLength: 50
		},
		vm: "name",
		span: 24,
		required: true
	},
	// {
	// 	type: "input",
	// 	props: {
	// 		label: "显示排序",
	// 		placeholder: "请输入显示排序",
	// 		clearable: true,
	// 	},
	// 	vm: "order",
	// 	required: true
	// },
	// {
	// 	type: "select",
	// 	props: {
	// 		label: "负责人",
	// 		placeholder: "请选择负责人",
	// 		clearable: true,
	// 	},
	// 	vm: "leader",
	// 	selectOptions: [...DepartmentStateList]
	// },
	// {
	// 	type: "input",
	// 	props: {
	// 		label: "联系电话",
	// 		placeholder: "请输入联系电话",
	// 		clearable: true,
	// 	},
	// 	vm: "phone"
	// },
	// {
	// 	type: "input",
	// 	props: {
	// 		label: "邮箱",
	// 		placeholder: "请输入邮箱",
	// 		clearable: true,
	// 	},
	// 	vm: "email"
	// },
	{
		type: "radio",
		props: {
			label: "状态",
			placeholder: "请选择状态",
			clearable: true,
		},
		vm: "status",
		span: 24,
		selectOptions: [...DepartmentStateList]
	}
]
const HandleModalProps = reactive<any>({
	requestFunc: postDepartmentAdd,
	callbackFunc: () => {
		handleModalRef.value?.closeDialog();
		getTableList();
	},
	editData: {},
	defaultData: {
		status: '0',
		agencyid: useData.agencyid
	},
	handleType: HandleType.ADD,
	title: '',
	handleFormOptions: [ ...handleFormOptions ]
})
const openDetail = (row: any, type: string) => {
	if (type === HandleType.ADD) {
		HandleModalProps.editData = {}
		HandleModalProps.title = '新增部门'
		HandleModalProps.requestFunc = postDepartmentAdd
	} else {
		HandleModalProps.editData = { ...row }
		HandleModalProps.title = '编辑部门'
		HandleModalProps.requestFunc = postDepartmentModify
	}
	HandleModalProps.handleType = type
	handleModalRef.value?.openDialog();
}
// 修改
const onHandleEdit = (row: object) => {
	openDetail(row, HandleType.EIDT)
};

const _getDepartmentDel = (id: number | string) => {
	getDepartmentDel({ id }).then((res) => {
		utils.commonNotification({
			condition: `${res.code}` === '0',
			msg_success: '删除成功',
			callback_success: () => getTableList()
		})
	});
}

// 删除
const onHandleDelete = (row: any) => {
	_getDepartmentDel(row.id)
};

//页容量改变
const onHandleSizeChange = (val: number) => {
	// console.log('页容量 ==>：', val);
	pageSize.value = val;
	getTableList();
};
//当前分页改变
const onHandleCurrentChange = (val: number) => {
	// console.log('当前页 🚀 ==>：', val);
	pageNum.value = val;
	getTableList();
};

// 获取表项数据
const getTableList = () => {
	let params = { ...searchForm.value };
	getDepartmentSearch({
		page: pageNum.value,
		size: pageSize.value,
		...params
	}).then((res) => {
		if (`${res.code}` === '0') {
			const { total, departmentVOList } = res.data;
			state.total = total;
			state.tableData = [...departmentVOList]
		} else {
			state.total = 0;
			state.tableData = []
		}
	});
};

const onSearch = (isReset?: string) => {
	pageNum.value = isReset ? 1 : pageNum.value;
	getTableList();
};

onMounted(() => getTableList());
</script>
